玩转多说

多说评论评论的出色的开放性和可定制性，让我们可以通过自定义CSS，给我们的评论栏带来更多的想象力：圆角头像、触发动画效果、阴影神马的当然不在话下。

自定义CSS路径：多说后台管理--设置--基本设置--自定义CSS

自定义头像动画

1. 圆角(或者圆形)+阴影

   #ds-reset .ds-avatar img{ width:54px;height:54px; /*设置图像的长和宽*/ border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:27px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; }

2. 鼠标悬浮时:图像进行360度旋转

   #ds-reset .ds-avatar img{ width:54px;height:54px; /*设置图像的长和宽*/ border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:27px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/ -moz-transition: -moz-transform 0.4s ease-out; } #ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); }

3. 鼠标悬浮时:图像放大缩小

   #ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{ -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0s; -moz-animation-duration: 0s; -ms-animation-duration: 0s; -o-animation-duration: 0s; animation-duration: 0s; -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -ms-animation-duration: 0.7s; -o-animation-duration: 0.7s; animation-duration: 0.7s; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } #ds-reset .ds-avatar img { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } #ds-reset .ds-avatar img:hover{ -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; }

评论显示User Agent

1. 下载embed.js
   多说官方(已失效)
   下载我当前使用的
2. 获取多说ID
   访问多说后台，http://duoshuo.com/settings/ ，点击你的用户名，地址栏中会出现如如下的ID地址
   http://duoshuo.com/profile/6232054888176550658/

3. 本地修改embed.js
   修改e.user_id为你的多说ID

   //管理员判断开始 function sskadmin(e) { var ssk = ''; if(e.user_id==6232054888176550658){ ssk = '<span class="sskadmin">admin' } return ssk+"</span> "; } //管理员判断结束

4. 上传embed.js
   我的做法是上传到GitHub,仓库的分支必须是gh-pages才行,master分支会失效,原因未知.如果你有服务器也可以上传到那.

5. 修改多说调用地址
   多说调用文件为next\layout\_scripts\comments\duoshuo.swig
   其他主题估计差不多
   修改ds.src的js地址为你刚刚上传的地址

   <script type="text/javascript"> var duoshuoQuery = {short_name:"{{duoshuo_shortname}}"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.id = 'duoshuo-script'; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//imeiji.info/gitDemo/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>

6. 自定义后台CSS

   /*多说UA开始*/ span.ua{ margin: 0 1px!important; color:#FFFFFF!important; /*text-transform: Capitalize!important; float: right!important; line-height: 18px!important;*/ }.ua_other.os_other{ background-color: #ccc!important; color: #fff; border: 1px solid #BBB!important; border-radius: 4px; } .ua_ie{ background-color: #428bca!important; border-color: #357ebd!important; border-radius: 4px; padding: 0 5px!important; } .ua_firefox{ background-color: #f0ad4e!important; border-color: #eea236!important; border-radius: 4px; padding: 0 5px!important; } .ua_maxthon{ background-color: #7373B9!important; border-color: #7373B9!important; border-radius: 4px; padding: 0 5px!important; } .ua_ucweb{ background-color: #FF740F!important; border-color: #d43f3a!important; border-radius: 4px; padding: 0 5px!important; } .ua_sogou{ background-color: #78ACE9!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_2345explorer{ background-color: #2478B8!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_2345chrome{ background-color: #F9D024!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_mi{ background-color: #FF4A00!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_lbbrowser{ background-color: #FC9D2E!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_chrome{ background-color: #EE6252!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_qq{ background-color: #3D88A8!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_apple{ background-color: #E95620!important; border-color: #4cae4c!important; border-radius: 4px; padding: 0 5px!important; } .ua_opera{ background-color: #d9534f!important; border-color: #d43f3a!important; border-radius: 4px; padding: 0 5px!important; } .os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 { background-color: #39b3d7!important; border-color: #46b8da!important; border-radius: 4px; padding: 0 5px!important; } .os_android { background-color: #98C13D!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important; } .os_ubuntu{ background-color: #DD4814!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important; } .os_linux { background-color: #3A3A3A!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important; } .os_mac{ background-color: #666666!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important; } .os_unix{ background-color: #006600!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important; } .os_nokia{ background-color: #014485!important; border-color: #1F1F1F!important; border-radius: 4px; padding: 0 5px!important; } .sskadmin{ background-color: #00a67c!important; border-color: #01B171!important; border-radius: 4px; padding: 0 5px!important; } /*多说UA结束*/

站点访问计数

站点访问计数我使用的是不蒜子
使用非常方便，只需一行脚本+一行标签

显示站点总访问量

我们使用的是hexo，所以要找到网站的布局文件，不同的主题的布局文件可能不一样，下面教程是针对NexT主题做出的修改。

1. 找到站点的themes/next/layout/_partials目录下的footer.swig文件,将以下脚本和标签插入到文件中

   <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 本站总访问量 <span id="busuanzi_value_site_pv"></span> &nbsp&nbsp&nbsp 您是第<span id="busuanzi_value_site_uv"></span>个来到的小伙伴

2. 插入到这里

   <div class="powered-by"> {{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }} </div> <div class="theme-info"> {{ __('footer.theme') }} - <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next"> NexT{% if theme.scheme %}.{{ theme.scheme }}{% endif %} </a> </div> # 插入到这里 {% block footer %}{% endblock %}

显示单页面访问量

不蒜子目前是不支持在首页显示每篇博文的计数的，而且NexT主题中，首页文章显示跟具体文章显示会用到同一个模板文件(themes/next/layout/_macro目录下的post.swig文件)，所以我们需要稍微修改一下模板的代码。

1. 修改themes/next/layout/_macro目录下的post.swig文件
   位于文件开头,在第三个参数的位置,增加is_pv字段

   {% macro render(post, is_index, is_pv, post_extra_class) %}

   插入以下代码，用于区分文章页面跟首页
   这里不用像”显示站点总访问量”中那样安装脚本，否则会出现重复计数的问题。

   {% if is_pv %} <span>&nbsp; | &nbsp; <span id="busuanzi_value_page_pv" ></span>次阅读 </span> {% endif %}

   插入这个位置

   {% if post.comments %} {% if (theme.duoshuo and theme.duoshuo.shortname) or theme.duoshuo_shortname %} <span class="post-comments-count"> &nbsp; | &nbsp; <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl"> <span class="post-comments-count ds-thread-count" data-thread-key="{{ post.path }}" itemprop="commentsCount"></span> </a> </span> {% elseif theme.disqus_shortname %} <span class="post-comments-count"> &nbsp; | &nbsp; <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl"> <span class="post-comments-count disqus-comment-count" data-disqus-identifier="{{ post.path }}" itemprop="commentsCount"></span> </a> </span> {% endif %} {% endif %} # 插入到这里 </div> </header>

2. 修改themes/next/layout目录下的post.swig文件
   这个文件是文章的模板
   找到以下代码，给render方法传入刚才第一步中设置的参数。

   {% block content %} <div id="posts" class="posts-expand"> #render方法第二个参数is_index为是否为首页 #第三个参数is_pv为我们刚才设置的是否显示计数 {{ post_template.render(page, false, true) }} <div class="post-spread"> {% if theme.jiathis %} {% include '_partials/share/jiathis.swig' %} {% elseif theme.duoshuo_shortname and theme.duoshuo_share %} {% include '_partials/share/duoshuo_share.swig' %} {% endif %} </div> </div> {% endblock %}

3. 修改themes/next/layout目录下的index.swig文件
   这个文件是首页的模板
   找到以下代码，给render方法传入刚才第一步中设置的参数。

   {% block content %} <section id="posts" class="posts-expand"> {% for post in page.posts %} #render方法第二个参数is_index为是否为首页 #第三个参数is_pv为我们刚才设置的是否显示计数 {{ post_template.render(post, true, false) }} {% endfor %} </section> {% include '_partials/pagination.swig' %} {% endblock %}

至此，我们的站点计数功能就做好了~

参考:
多说评论也玩圆角头像动画「自定义CSS:无压力小白级教程」
多说自定义CSS 让你的多说评论动感起来
多说评论框UA显示/博主标记
Hexo搭建GitHub博客（三）- NexT主题配置使用